<template>
    <el-drawer :model-value="modelValue" title="查看创意" :size="670" @closed="handleClose">
        <section
            id="componentsContainer"
            v-loading="loading"
            :style="{ height: `${maxTableHeight}px`, overflow: 'auto' }"
        >
            <el-form ref="addFormRef" inline status-icon>
                <el-form-item class="block">
                    <h4>创意信息</h4>
                </el-form-item>
                <el-form-item label="创意名称:" prop="deliveryMode">
                    {{ ideasDetail.name }}
                </el-form-item>
                <el-form-item label="创意行业:" prop="deliveryMode">
                    {{ ideasDetail.industryCodeName }}
                </el-form-item>
                <el-form-item label="媒体类型:" prop="seconds"> {{ mediaType[ideasDetail.mediaType] }} </el-form-item>
                <el-form-item label="屏幕类型:" prop="numbers"> 联动 </el-form-item>
                <el-form-item label="投放时长:" prop="screenType"> {{ ideasDetail.time }} 秒 </el-form-item>
                <el-form-item class="block">
                    <h4>创意预览</h4>
                </el-form-item>
            </el-form>

            <el-row v-if="ideasDetail.mediaType === 1">
                <XcScreenType screen-type="inner" :top="screenModel.top" :bottom="screenModel.bottom" />
            </el-row>

            <el-row v-else-if="ideasDetail.mediaType === 2" :key="new Date().getTime()">
                <div class="out-screen">
                    <XcScreenType
                        screen-type="out"
                        :top="screenModel.top"
                        :bottom="screenModel.bottom"
                        @on-play="onScreenPlay"
                        @get-instance="getOutScreenInstance"
                    />
                </div>
                <div class="single-screen">
                    <XcScreenType
                        screen-type="single"
                        :top="screenModelSingle.top"
                        :autoplay="false"
                        @on-play="onScreenPlay"
                    />
                </div>
            </el-row>
        </section>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, watch, getCurrentInstance, useRouter } from 'vue';
// import XcScreenType from '@x-tech/fe-pc-components/src/components/XcScreenType/index.vue';

import XcScreenType from '@/views/delivery/creativeManage/components/XcScreenType.vue';

import { useStore } from 'vuex';
import { getDetail } from '@/api/delivery/creativeManage';
import useTableSetting from '@/hooks/useTableSetting.ts';
import vidioNonSupport from '@/assets/screen_nonsupport.png';
import { mediaType } from '@/utils/config';

// 控制屏幕播放逻辑
let curPlayingScreen: any = null;
const onScreenPlay = (screenTypeIns: any) => {
    if (curPlayingScreen) {
        curPlayingScreen.setPauseState();
    }
    curPlayingScreen = screenTypeIns;
};
const getOutScreenInstance = (screenTypeIns: any) => {
    curPlayingScreen = screenTypeIns;
};
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    ideasId: {
        type: Number,
        default: () => null,
    },
});
const { maxTableHeight, setTableMaxHeight } = useTableSetting({ id: 'componentsContainer', offsetBottom: 130 });
const emits = defineEmits<{ (e: 'update:modelValue', visible: boolean): void }>();

const store = useStore();
const loading = ref(false);

const screenModel = reactive({
    top: {
        resourcesType: 2,
        src: '',
    },
    bottom: {
        leftSrc: null,
        rightSrc: null,
        src: null,
    },
});
const screenModelSingle = reactive({
    top: {
        resourcesType: 2,
        src: '',
    },
});

const ideasDetail = ref({
    industryCode: null,
    time: null,
    mediaType: 1,
});

const handleGetIdeaInfo = async (id) => {
    loading.value = true;
    const data = await getDetail(id) || {};
    ideasDetail.value = data;
    loading.value = false;
    handleSreen(ideasDetail.value.materialDtoList);
};

const handleSreen = (materialDtoList) => {
    console.log('materialDtoList', materialDtoList);
    const curMediaType = ideasDetail.value.mediaType;

    screenModel.top.src = materialDtoList.find((item: any) => item.position === (curMediaType === 1 ? 1 : 4))?.showUrl;
    screenModel.top.resourcesType = 2;

    const screen880 = materialDtoList.find((item: any) => item.position === (curMediaType === 1 ? 3 : 5))?.url;
    const screen720 = materialDtoList.find((item: any) => item.position === (curMediaType === 1 ? 2 : 6))?.url;
    screenModel.bottom.src = screen720 ? screen720 : screen880;

    screenModel.bottom.leftSrc = materialDtoList.find(
        (item: any) => item.position === (curMediaType === 1 ? 3 : 5)
    )?.url;
    screenModel.bottom.rightSrc = materialDtoList.find(
        (item: any) => item.position === (curMediaType === 1 ? 2 : 6)
    )?.url;

    if (curMediaType === 2) {
        screenModelSingle.top.src = materialDtoList.find((item: any) => item.position === 7).showUrl;
    }

    console.log('screenModelSingle.top', screenModelSingle.top);
};
const handleClose = () => {
    emits('update:modelValue', false);
};

watch(
    () => props.ideasId,
    () => {
        handleGetIdeaInfo(props.ideasId);
    }
);
</script>

<style scoped lang="scss">
.out-screen {
    margin-right: 20px;
}
.el-form {
    .el-form-item {
        width: 45%;
        display: inline-flex;
        // flex-direction: column;
        // align-items: flex-start;
        vertical-align: top;
        &.block {
            display: flex;
            margin: 20px 0 16px;
            :deep(.el-form-item__content) {
                line-height: 1.3;
            }
        }
        &.columns {
            :deep(.el-form-item__content) {
                flex-direction: column;
                align-items: flex-start;
            }
        }
        :deep(.el-form-item__label) {
            color: #333;
        }
        :deep(.el-date-editor),
        .el-input,
        .el-select,
        :deep(.el-cascader),
        .tips {
            width: 280px;
            & + .el-button {
                margin-left: 20px;
            }
        }
        .tips {
            line-height: 1.3;
            color: var(--el-text-color-placeholder);
        }
        .ideas {
            display: flex;
            flex: 1;
        }
    }
}
</style>
